/**
 * Created by madi on 2018/8/13.
 */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Menu, Icon,Tabs ,Table, Tree,Modal ,Input,Button,message ,Row,Col,Select,Popconfirm,TreeSelect,Tooltip,DatePicker} from 'antd';
import styles from './index.less';
import { arrayToTree } from 'utils';
import moment from 'moment';
const TabPane = Tabs.TabPane;
const { TreeNode } = Tree;
const { MonthPicker, RangePicker } = DatePicker;
const { Option, OptGroup } = Select;
const Search = Input.Search;
let arrKeySub = {};
let arrKeySub_5 = {};
let arrNameSub = {};
const Pages = ({ organ, dispatch, loading }) => {

    const menuOne = organ.getOrganData ? organ.getOrganData:[];//应急
    const menuTow= organ.getOrganData ? organ.getOrganData:[];//角色

    const menuTreeOne = arrayToTree(menuOne.filter(_ => _.mpid !== '-1'), 'id', 'f_id');
    const menuTreeTow = arrayToTree(menuTow.filter(_ => _.mpid !== '-1'), 'id', 'f_id');

    const levelMap = {};
    const getMenus = (menuTreeN, siderFoldN) => {
        const newMenu = menuTreeN.map((item) => {
            if (item.children) {
                if (item.mpid) {
                    levelMap[item.id] = item.mpid;
                }
                return (
                    <Menu.SubMenu
                        style={{width:270}}
                        key={item.id}
                        title={<span>
                            <Icon type='folder-open'/>
                            <Tooltip placement="topLeft" title={item.s_name}>
                                <span onClick={(e)=>{
                                    e.stopPropagation();
                                    if(organ.typeofZZ == 1){
                                        dispatch({type:"organ/getTXL",payload:{id:item.id,type:'1'}});
                                        dispatch({type:"organ/inputOut",payload:{openKeys:{key:""},openKeysSubName:item.s_name,fistValue:item.id}});
                                    }
                                }}>{item.s_name.length>8?`${item.s_name.substring(0,8)}...`:item.s_name}</span>
                            </Tooltip>

                            {
                                organ.keys == item.id &&
                                <span style={{float:'right'}}>
                                    {
                                        organ.typeofZZ == '1'?
                                            <Icon onClick={(e)=>{
                                                e.stopPropagation();
                                                dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:item.id}});
                                            }}type="plus" />:
                                            <Icon onClick={(e)=>{
                                                e.stopPropagation();
                                                dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:item.id}});
                                            }}type="edit" />
                                    }
                                </span>
                            }
                        </span>}
                    >
                        {getMenus(item.children)}
                    </Menu.SubMenu>
                );
            }
            if(item.type == '3'){
                return (
                    <Menu.Item style={{width:270}} onClick={()=>{dispatch({type:"organ/inputOut",payload:{openKeysSubName:item.s_name,fistValue:item.id,noneBtn:true}});}} key={item.id}>
                        <Icon type={organ.typeofZZ == 1?"folder":"user"} />
                        <Tooltip placement="topLeft" title={item.s_name}>
                            {item.s_name.length>8?`${item.s_name.substring(0,8)}...`:item.s_name}
                        </Tooltip>
                        {
                            organ.openKeys.key == item.id &&
                            <span style={{float:'right'}}>
                                <Icon onClick={(e)=>{
                                    e.stopPropagation();
                                    //dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:item.id}});
                                }}type="edit" />
                            </span>
                        }
                    </Menu.Item>
                );
            }else{
                return (
                    <Menu.Item style={{width:270}} onClick={()=>{dispatch({type:"organ/inputOut",payload:{openKeysSubName:item.s_name,fistValue:item.id,noneBtn:false}});}} key={item.id}>
                        <Icon type='folder' />
                        <Tooltip placement="topLeft" title={item.s_name}>
                            {item.s_name.length>8?`${item.s_name.substring(0,8)}...`:item.s_name}
                        </Tooltip>
                        {
                            organ.openKeys.key == item.id &&
                            <span style={{float:'right'}}>
                                {organ.typeofZZ == 1?<Icon onClick={(e)=>{
                                    e.stopPropagation();
                                    dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:item.id}});
                                }}type="plus" />:<Icon onClick={(e)=>{
                                    e.stopPropagation();
                                    // dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:item.id}});
                                }}type="edit" />}

                            </span>
                        }
                    </Menu.Item>
                );
            }

        });
        return newMenu;
    };
    //角色
    const columnsRole = [
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '应急职务',
            dataIndex: 'remark',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
        },
        {
            title: '办公电话',
            dataIndex: 'callNum',
        },
        {
            title: '虚拟网号码',
            dataIndex: 'shortNum',
        },
        // {
        //     title: '操作',
        //     dataIndex: 'option',
        //     render: (text,record) =><div>
        //         <a onClick={()=>{
        //             //dispatch({type:"organ/inputOut",payload:{record:record,visibleTow:true}});
        //         }}>修改</a>
        //     </div>,
        // },

    ];
    //组织
    const columns = [
        ...columnsRole.slice(0,5),
        {
            title: '部门角色',
            dataIndex: 'organizationstr',
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text,record) =><div>
                <a onClick={()=>{
                    dispatch({type:"organ/inputOut",payload:{record:record,visibleTow:true}});
                }}>修改</a>
            </div>,
        },
    ];
    const rowSelection = {
        selectedRowKeys:organ.selectedRowKeys,
        onChange: (selectedRowKeys) => {
            dispatch({type:"organ/inputOut",payload:{selectedRowKeys:selectedRowKeys}});
        },
    };
    // console.log(1111,getlistkey(organ.getOrganData)[1],organ.openKeys.key,menuTreeOne);
    return (
        <div className={styles.container}>
            <PagesPOST dispatch={dispatch} {...organ} menuTreeOne={menuTreeOne} menuTreeTow={menuTreeTow} loading={loading.global}/>
            <div className={styles.nav}>
                <Search
                    placeholder="搜索"
                    onSearch={value => console.log(value)}
                    style={{ width: 260,marginRight:10}}
                />
                <div className={styles.TabsNew}>
                    <div style={{
                        fontSize:18,width:110,textAlign:'center',paddingBottom:10,cursor:'pointer',
                        color:organ.typeofZZ == 1?'#1890ff':'',
                        borderBottom:organ.typeofZZ == 1?'1px solid #1890ff':'1px solid #fff',
                    }} onClick={()=>{
                        dispatch({type:"organ/getOrgan",payload:{type:'1'}});
                        dispatch({type:"organ/inputOut",payload:{typeofZZ:'1',getOrganData:'',fistValue:''}});
                    }}>应急组织</div>
                    <div style={{
                        fontSize:18,width:110,textAlign:'center',paddingBottom:10,cursor:'pointer',
                        color:organ.typeofZZ == 2?'#1890ff':'',
                        borderBottom:organ.typeofZZ == 2?'1px solid #1890ff':'1px solid #fff',
                    }} onClick={()=>{
                        dispatch({type:"organ/getOrgan",payload:{type:'2'}});
                        dispatch({type:"organ/inputOut",payload:{typeofZZ:'2',getOrganData:'',fistValue:''}});
                    }}>角色</div>
                </div>
                {
                    organ.typeofZZ == '1'?
                        <div style={{height:'58vh',overflow:'auto',overflowX:"hidden"}}>
                            {
                                getlistkey(organ.getOrganData)[2] &&
                                    <Menu defaultSelectedKeys={[getlistkey(organ.getOrganData)[0]]}
                                        selectedKeys={[organ.openKeys.key]}
                                        defaultOpenKeys={getlistkey(organ.getOrganData)[1]}
                                        mode="inline" onOpenChange={keys =>{
                                            dispatch({type:"organ/inputOut",payload:{keys:keys[keys.length-1],openKeys:{}}});
                                        }} onSelect={openKeys=>{
                                            // console.log(222,openKeys)
                                            if(openKeys.key == organ.keys || openKeys.key == '111111'){
                                                dispatch({type:"organ/inputOut",payload:{visible:true,openKeys:openKeys}});
                                            }else{
                                                dispatch({type:"organ/inputOut",payload:{openKeys:openKeys,visibleList:true}});
                                                dispatch({type:"organ/getTXL",payload:{id:openKeys.key,type:organ.typeofZZ?organ.typeofZZ:'1'}});
                                            }
                                        }}>
                                        {getMenus(menuTreeOne)}
                                        <Menu.Item key='111111'>
                                            <Icon style={{color:'#0099FF'}} type="plus" />
                                            <span style={{color:'#0099FF'}} onClick={()=>
                                                dispatch({type:"organ/inputOut",payload:{visible:true,openKeysSub:'111111'}})}>添加组织</span>
                                        </Menu.Item>
                                    </Menu>
                            }
                        </div>
                        :
                        <div style={{height:'58vh',overflow:'auto',overflowX:"hidden"}}>
                            <div style={{textAlign:'center'}}>
                                <Button onClick={()=>{
                                    dispatch({type:"organ/inputOut",payload:{visible_4:true,visible_41:true,deleteValue:true}});
                                }} style={{marginTop:10}}>添加部门</Button>
                                <Button onClick={()=>{
                                    dispatch({type:"organ/inputOut",payload:{visible_4:true,visible_41:false,deleteValue:true}});
                                }} style={{marginTop:10,marginLeft:10}}>新建角色</Button>
                            </div>
                            {
                                getlistkey(organ.getOrganData)[2] &&
                                    <Menu defaultSelectedKeys={[getlistkey(organ.getOrganData)[0]]}
                                        selectedKeys={[organ.openKeys.key]}
                                        defaultOpenKeys={getlistkey(organ.getOrganData)[1]}
                                        mode="inline" onOpenChange={keys =>{
                                            dispatch({type:"organ/inputOut",payload:{keys:keys[keys.length-1]}});
                                        }} onSelect={openKeys=>{
                                            if(openKeys.key == organ.keys || openKeys.key == '222222'){
                                                dispatch({type:"organ/inputOut",payload:{visible:true,openKeys:openKeys}});
                                            }else{
                                                dispatch({type:"organ/inputOut",payload:{openKeys:openKeys,visibleList:true}});
                                                dispatch({type:"organ/getTXL",payload:{id:openKeys.key,type:organ.typeofZZ?organ.typeofZZ:'2'}});
                                            }
                                        }}>
                                        {getMenus(menuTreeTow)}
                                    </Menu>
                            }
                        </div>
                }

                {/* <Tabs defaultActiveKey="1" onChange={key=>{}}> ======>未知bug无法解决,弃用
                    <TabPane tab="" key="1">
                    </TabPane>
                    <TabPane  tab="角色" key="2">
                        <div style={{textAlign:'center'}}>

                        </div>
                    </TabPane>
                </Tabs> */}
            </div>
            <div className={styles.content}>
                <h2>华电湖北发电有限公司黄石热电厂</h2>
                <b><Icon style={{marginRight:10}} type={organ.typeofZZ == 1?"folder":"team"} />{organ.openKeysSubName}</b>
                <div>
                    <Input value={organ.searchValue} onChange={e=>dispatch({type:'organ/save',payload:{searchValue:e.target.value}})}
                        style={{width:300}} placeholder='请输入姓名'/>
                    <Button type="primary" onClick={()=>
                        dispatch({type:"organ/getTXL",payload:{
                            id:organ.openKeys.key || organ.fistValue,
                            type:organ.typeofZZ?organ.typeofZZ:'1',
                            searchValue:organ.searchValue || '',
                        }})
                    }style={{margin:5}}>查询</Button>
                    <Button onClick={()=>
                        dispatch({type:"organ/inputOut",payload:{searchValue:''}})
                    }style={{margin:5}}>重置</Button>
                    {
                        (organ.typeofZZ =='2' && organ.noneBtn) && <Button type="primary" onClick={()=>{
                            dispatch({type:"organ/inputOut",payload:{visible_5:true}});
                            dispatch({type:"organ/getAllRole"});
                            // dispatch({type:"organ/getOrganValue",payload:{type:1}});
                        }}style={{margin:5}}>添加成员</Button>
                    }
                </div>
                {

                    organ.typeofZZ !=='2' &&
                    <div>
                        {
                            getlistkey(organ.getOrganData)[0] !== '111111' &&
                            <Button type="primary" onClick={()=>{
                                dispatch({type:"organ/inputOut",payload:{visibleTow:true,deleteValue:true}});
                                dispatch({type:"organ/getAllRole"});
                            }}style={{margin:5}}>添加成员</Button>
                        }
                        <Button onClick={()=>{
                            if(organ.selectedRowKeys && organ.selectedRowKeys.length !== 0){
                                dispatch({type:"organ/save",payload:{visible_3:true}});
                            }else{
                                message.error('未选择成员!!!');
                            }
                        }}style={{margin:5}}>调整部门</Button>
                        <Popconfirm title="确定移除?" onCancel={()=>{}}
                            onConfirm={()=>{
                                if(organ.selectedRowKeys && organ.selectedRowKeys.length !== 0 ){
                                    dispatch({type:"organ/deleteMaillist",payload:{userId:organ.selectedRowKeys}});
                                }else{
                                    message.error('未选择成员!!!');
                                }
                            }} okText="是" cancelText="否">
                            <Button style={{margin:5}}>批量删除</Button>
                        </Popconfirm>

                        <Popconfirm title="确定员工离职?" onCancel={()=>{}}
                            onConfirm={()=>{
                                if(organ.selectedRowKeys && organ.selectedRowKeys.length !== 0 ){
                                    dispatch({type:"organ/userLeave",payload:{userId:organ.selectedRowKeys}});
                                }else{
                                    message.error('未选择成员!!!');
                                }
                            }} okText="是" cancelText="否">
                            <Button style={{margin:5}}>员工离职</Button>
                        </Popconfirm>

                    </div>
                }
                <Table
                    columns={organ.typeofZZ =='1'?columns:columnsRole}
                    rowSelection={rowSelection}
                    size="small"
                    loading={loading.global}
                    pagination={{
                        pageSize: 10, //显示几条一页
                        showSizeChanger: true,
                    }}
                    rowKey={id=>id.id}
                    dataSource={organ.getTXLData || null} />
            </div>
        </div>);
};


class PagesPOST extends React.Component {

    constructor (props) {
        super(props);
        this.state = {
            name: "",
            nameADD:'',
            phoneADD:'',
            bumen:[],
            zhize:[],
            xinbie:'',
            ny:'',
            zc:'',
            phoneONEADD:'',
            phoneTOWADD:'',
            lajiValue:{},
            roleValue:'',
            card_num: '',
        };
    }
    componentWillMount () {
        this.props.dispatch({type:"organ/getOrgan",payload:{type:1}});
        this.props.dispatch({type:"organ/save",payload:{typeofZZ:'1'}});
        this.props.dispatch({type:"organ/getAllRole"});//获取通讯录和角色
    }
    //递归生成部门树型
    menuTreeOneFun (arr){
        return arr.map(item =>{
            if(item.children){
                return(<OptGroup key={item.id} label={item.s_name}>
                    <Option value={item.id}>{item.s_name}</Option>
                    {this.menuTreeOneFun(item.children)}
                </OptGroup>);
            }
            return <Option key={item.id} value={item.id}>{item.s_name}</Option>;
        });
    }
    //树状图组件
    renderTreeNodes = data => data.map((item) => {
        arrKeySub[item.id] = true;
        if (item.children) {
            return (
                <TreeNode title={item.s_name} key={item.id} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode title={item.s_name} key={item.id} dataRef={item} />;
    });
    renderTreeNodes_5 = data => data.map((item) => {
        if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
            arrKeySub_5[item.id] = true;
            return (
                <TreeNode title={item.s_name} key={item.id} dataRef={item}>
                    {this.renderTreeNodes_5(item.roleList)}{this.renderTreeNodes_5(item.orgList)}
                </TreeNode>
            );
        }
        if(arrKeySub_5[item.id]){
            return;
        }
        arrNameSub[item.id] = item.rolr_name || item.s_name;
        if(item.s_name){
            arrKeySub_5[item.id] = true;
        }
        return <TreeNode title={item.rolr_name || item.s_name} key={item.id} dataRef={item} />;
    });
    renderTreeNodesTow = data => data.map((item) => {
        if (item.children) {
            arrKeySub[item.id] = true;
            return (
                <TreeSelect.TreeNode title={item.s_name} value={item.id} key={item.id}>
                    {this.renderTreeNodesTow(item.children)}
                </TreeSelect.TreeNode>
            );
        }
        return <TreeSelect.TreeNode disabled={item.type == 3?true:false} title={item.s_name} key={item.id} value={item.id} />;
    });
    render (){
        let {
            visible ,
            visibleTow,
            visible_3,
            visible_41,
            visible_4,
            visible_5,
            dispatch,
            typeofZZ,
            menuTreeOne,
            menuTreeTow,
            menuTreeOne_5,
            openKeysSub,
            openKeys,
            searchValue,
            fistValue,
            getBMZZData,
            loading,
            record,
            getOrganData,
            getOrganValueData,
            selectedRowKeys,
        } = this.props;
        return (
            <div>
                <Modal
                    title="组织结构操作"
                    visible={visible}
                    confirmLoading={loading}
                    onOk={()=>{
                        if(this.state.name){
                            dispatch({type:"organ/postOrgan",payload:{
                                type:typeofZZ?typeofZZ:'1',
                                s_name:this.state.name,
                                f_id:openKeysSub,
                                duty:'职责',
                            }});
                        }else{
                            message.error('请输入名称！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"organ/inputOut",payload:{visible:false}});
                    }}>
                    名称 :
                    <Input value={this.state.name}
                        placeholder="名称"
                        style={{margin:10,width:256}}
                        onChange={e=>this.setState({name:e.target.value})}/>
                </Modal>
                <Modal
                    title={record.id?"修改成员":"添加成员"}
                    visible={visibleTow}
                    confirmLoading={loading}
                    onOk={()=>{
                        let {nameADD,phoneADD,bumen,zhize,xinbie,ny,zc,phoneONEADD,phoneTOWADD, card_num} = this.state;
                        if(nameADD ){
                            let body ={
                                name: nameADD,
                                phone:phoneADD,
                                dutys:bumen.length ==0?[fistValue]:bumen,
                                organizations:zhize,
                                sex:xinbie,
                                birthday:ny,
                                shortNum:phoneONEADD,
                                callNum:phoneTOWADD,
                                remark:zc,
                                type:typeofZZ,
                                searchValue:searchValue || '',
                                f_id:fistValue,
                                card_num: card_num,
                            };
                            if(record.id){
                                body.id = record.id;
                            }
                            dispatch({type:record.id?"organ/putMaillist":"organ/postMaillist",payload:body});
                        }else{
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"organ/inputOut",payload:{visibleTow:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{color:'red'}}>*</span>姓名:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({nameADD: e.target.value})}
                                value={this.state.nameADD}
                                placeholder="名称"/>
                        </Col>
                        <Col span={6}><span>身份证号码:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({card_num: e.target.value})}
                                value={this.state.card_num}
                                placeholder="请输入身份证号码"/>
                        </Col>
                        <Col span={6}><span>应急组织部门:</span></Col>
                        <Col span={14}>
                            <Select disabled={record.id?true:false}
                                value={this.state.bumen.length ==0? [fistValue]:this.state.bumen}
                                placeholder="请选择" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                mode="multiple" onChange={value=>{
                                    this.setState({
                                        bumen:value,
                                    });
                                }}>
                                {menuTreeOne && this.menuTreeOneFun(menuTreeOne)}
                            </Select>
                        </Col>
                        <Col span={6}><span>职务:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({zc: e.target.value})}
                                value={this.state.zc}
                                placeholder="请输入应急委职务"/>
                        </Col>
                        <Col span={6}><span>岗位角色:</span></Col>
                        <Col span={14}>
                            <Select disabled={record.id?true:false} value={this.state.zhize}
                                placeholder="请选择" style={{ width: 300, marginBottom: 10, marginTop: -4 }}
                                mode="multiple" onChange={value=>{
                                    this.setState({
                                        zhize:value,
                                    });
                                }}>
                                {
                                    getBMZZData && this.menuTreeOneFunRole(getBMZZData)
                                }
                            </Select>
                        </Col>
                        <Col span={6}><span>手机号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({phoneADD: e.target.value})}
                                value={this.state.phoneADD}
                                placeholder="手机号"/>
                        </Col>
                        <Col span={6}><span>办公号:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({phoneTOWADD: e.target.value})}
                                value={this.state.phoneTOWADD}
                                placeholder="办公电话"/>
                        </Col>
                        <Col span={6}><span>虚拟网:</span></Col>
                        <Col span={14}>
                            <Input style={{width: 300, marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({phoneONEADD: e.target.value})}
                                value={this.state.phoneONEADD}
                                placeholder="虚拟网号码"/>
                        </Col>
                        <Col span={6}><span>性别:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.xinbie?this.state.xinbie:'请选择'} style={{ width: 300, marginBottom: 10, marginTop: -4 }} onChange={value=>{
                                this.setState({
                                    xinbie:value,
                                });
                            }}>
                                <Option value='1'>男</Option>
                                <Option value='2'>女</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span>出生年月:</span></Col>
                        <Col span={14}>
                            <DatePicker style={{width: 300, marginBottom: 10, marginTop: -4}}
                                value={this.state.ny?moment(this.state.ny, 'YYYY/MM/DD'):undefined}
                                placeholder="请选择(非必填)"
                                onChange={(date, dateString)=>{
                                    this.setState({ny: dateString});
                                }} />
                        </Col>
                    </Row>
                </Modal>
                <Modal
                    title='调整应急组织'
                    width={800}
                    visible={visible_3}
                    confirmLoading={loading}
                    onOk={()=>{
                        console.log(selectedRowKeys,this.state.checkedKeys);
                    }}
                    onCancel={()=>{
                        dispatch({type:"organ/inputOut",payload:{visible_3:false,record:{}}});
                    }}>
                    <div style={{display:'flex',justifyContent:'space-between',padding:5,border:'1px solid #aaa'}}>
                        <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                            <h2 style={{marginLeft:10}}>选择:</h2>
                            <Tree
                                checkable
                                onExpand={this.onExpand}
                                checkStrictly={true}
                                defaultExpandAll={true}
                                onCheck={(checkedKeys,halfChecked)=>{
                                    //自由控制checkStrictly=true,并注释掉下面这行!
                                    // checkedKeys.map((item,index)=>{
                                    //     if(arrKeySub[item]){
                                    //         delete checkedKeys[index];
                                    //     }
                                    // });

                                    checkedKeys.checked.map(item=>{
                                        if(item == '000'){
                                            let arr = [];
                                            for(let i in arrKeySub){
                                                arr.push(i);
                                            }
                                            this.setState({
                                                checkedKeys:arr,
                                                checkedKeys_000:true,
                                            });
                                        }else {
                                            if(this.state.checkedKeys_000){
                                                this.setState({
                                                    checkedKeys:[],
                                                    checkedKeys_000:false,
                                                });
                                            }else {
                                                this.setState({
                                                    checkedKeys:checkedKeys.checked,
                                                });
                                            }
                                        }
                                    });
                                }}
                                showLine
                                checkedKeys={this.state.checkedKeys}
                                // onSelect={(selectedKeys, info)=>{
                                //     console.log(selectedKeys);
                                //     this.setState({
                                //         treeSelectedKeys:selectedKeys,
                                //     });
                                // }}
                                // selectedKeys={this.state.treeSelectedKeys}
                            >
                                {this.renderTreeNodes([{children:menuTreeOne,id:'000',s_name:'全选'}])}
                            </Tree>
                        </div>
                        <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                            <h2 style={{marginLeft:10}}>已选:</h2>
                            {
                                this.state.checkedKeys && this.state.checkedKeys.map(item=>{
                                    return item !== '000' && <p style={{marginLeft:40,marginRight:10}} key={item}>
                                        <Icon type="team" />{getOrganData && getOrganData.map(i =>{
                                            if(i.id == item){
                                                return i.s_name;
                                            }
                                        })}</p>;
                                })
                            }
                        </div>
                    </div>
                </Modal>
                <Modal
                    title={visible_41?'添加部门':'添加角色'}
                    visible={visible_4}
                    style={{top:60}}
                    confirmLoading={loading}
                    onOk={()=>{
                        if(visible_41){
                            if(this.state.roleValue && this.state.TreeSelectValue) {
                                dispatch({
                                    type: "organ/postOrgan", payload: {
                                        type: typeofZZ ? typeofZZ : '1',
                                        s_name: this.state.roleValue,
                                        f_id: this.state.TreeSelectValue,
                                        duty: '职责',
                                    }});
                            }else {
                                message.error('请填写完整！');
                            }
                        }else{
                            //console.log(this.state.roleValue,this.state.TreeSelectValue);
                            if(this.state.roleValue && this.state.TreeSelectValue){
                                dispatch({type:"organ/postOrganRole",payload:{
                                    rolr_name:this.state.roleValue,
                                    o_id:this.state.TreeSelectValue,
                                }});
                            }else {
                                message.error('请填写完整！');
                            }
                        }
                    }}
                    onCancel={()=>{
                        dispatch({type:"organ/inputOut",payload:{visible_4:false,record:{}}});
                    }}>
                    <Row>
                        <Col span={24}>
                            <Col span={5}><span>{!visible_41?'角色名称:':'部门名称:'}</span></Col>
                            <Col span={12}><Input style={{width: 300,marginBottom: 10, marginTop: -4}}
                                onChange={e => this.setState({roleValue: e.target.value})}
                                value={this.state.roleValue}
                                placeholder="请输入"/></Col>
                        </Col>
                        <Col span={24}>
                            <Col span={5}><span>{!visible_41?'角色所属部门:':'上级部门:'}</span></Col>
                            <Col style={{height:this.state.onFocusOronBlur && 300}} span={12}>
                                <TreeSelect
                                    // showSearch
                                    // onFocus={()=>this.setState({onFocusOronBlur:true})}
                                    // onBlur={()=>setTimeout(()=>this.setState({onFocusOronBlur:false}),300)}
                                    style={{ width: 300 ,marginBottom: 10, marginTop: -4}}
                                    value={this.state.TreeSelectValue}
                                    dropdownStyle={{ maxHeight: 300, overflow: 'auto' }}
                                    placeholder="请选择"
                                    allowClear
                                    treeDefaultExpandAll
                                    onChange={(TreeSelectValue)=>{
                                        this.setState({
                                            TreeSelectValue:TreeSelectValue,
                                        });
                                    }}
                                >
                                    <TreeSelect.TreeNode disabled={!visible_41} title='一级根节点' key="222222" value='222222' />
                                    {this.renderTreeNodesTow(menuTreeTow)}
                                </TreeSelect>
                            </Col>
                        </Col>
                    </Row>
                </Modal>
                <Modal
                    title='添加成员'
                    width={800}
                    visible={visible_5}
                    confirmLoading={loading}
                    onOk={()=>{
                        console.log(this.state.checkedKeys_5);
                        dispatch({type:"organ/postTXL",payload:{
                            user_id:this.state.checkedKeys_5,
                            type:'2',
                            organ_id:openKeys.key,
                            searchValue:searchValue,
                        }});
                    }}
                    onCancel={()=>{
                        dispatch({type:"organ/inputOut",payload:{visible_5:false,record:{}}});
                    }}>
                    <div style={{display:'flex',justifyContent:'space-between',padding:5,border:'1px solid #aaa'}}>
                        <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                            <h2 style={{marginLeft:10}}>选择:</h2>
                            <Tree
                                checkable
                                onExpand={this.onExpand}
                                checkStrictly={false}
                                defaultExpandAll={true}
                                onCheck={(checkedKeys,halfChecked)=>{
                                    //自由控制checkStrictly=true,并注释掉下面这行!
                                    //checkedKeys.uniq();//数组去重
                                    checkedKeys.map((item,index)=>{
                                        if(arrKeySub_5[item]){
                                            delete checkedKeys[index];
                                        }
                                    });
                                    //console.log('checkedKeys',checkedKeys.notempty(),arrKeySub_5);
                                    this.setState({
                                        checkedKeys_5:checkedKeys.notempty(),
                                    });
                                }}
                                showLine
                            >
                                {this.renderTreeNodes_5([{orgList:menuTreeOne_5,roleList:[],id:'000',s_name:'全选'}])}
                            </Tree>
                        </div>
                        <div style={{width:'48%',height:'50vh',border:'1px solid #aaa',overflow:'auto'}}>
                            <h2 style={{marginLeft:10}}>已选:</h2>
                            {
                                this.state.checkedKeys_5 && this.state.checkedKeys_5.map(item=>{
                                    return <p style={{marginLeft:40,marginRight:10}} key={item}>
                                        <Icon type="team"/>{arrNameSub[item]}</p>;
                                })
                            }
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }

    //角色树
    menuTreeOneFunRole (arr){
        return arr.map(item =>{
            if((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)){
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name?false:true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }

    onExpand = (expandedKeys) => {
        // console.log('onExpand', expandedKeys);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    }
    componentWillReceiveProps (nextProps) {
        if(!nextProps.visible){
            this.setState({
                name:'',
            });
        }
        if(!nextProps.fistValue && nextProps.getOrganData){
            this.props.dispatch({type:'organ/save',payload:{
                fistValue:getlistkey(nextProps.getOrganData)[0],
                openKeys:{key:getlistkey(nextProps.getOrganData)[0]},
                openKeysSubName:getlistkey(nextProps.getOrganData)[2],
                noneBtn:getlistkey(nextProps.getOrganData)[3],
            }});
            this.props.dispatch({type:"organ/getTXL",payload:{
                id:getlistkey(nextProps.getOrganData)[0],
                type:nextProps.typeofZZ?nextProps.typeofZZ:'1',
            }});
        }
        if (nextProps.record.id !== this.props.record.id) {
            // console.log(nextProps.record);
            let {name,phone,shortNum,birthday,sex,organizations,dutys,callNum,remark,organizationstr} = nextProps.record;
            let bumen = [],zhize = [];
            organizations && organizations.map(item=>bumen.push(item.id));
            dutys && dutys.map(item=>zhize.push(item.id));
            this.setState({
                nameADD: name,
                phoneADD:phone,
                bumen:bumen,
                zhize:organizationstr,//zhize,
                xinbie:sex,
                ny:birthday,
                phoneONEADD:shortNum,
                phoneTOWADD:callNum,
                zc:remark,
            });
        }
        if(nextProps.deleteValue){
            this.setState({
                nameADD:'',
                phoneADD:'',
                bumen:[],
                zhize:[],
                xinbie:'',
                ny:'',
                zc:'',
                phoneONEADD:'',
                phoneTOWADD:'',
                roleValue:'',
                TreeSelectValue:'',
            });
            this.props.dispatch({type:"organ/save",payload:{deleteValue:false}});
        }
    }
}

//递归获取末端键值
const getlistkey = (arr)=>{
    const menuTree = arr && arrayToTree(arr.filter(_ => _.mpid !== '-1'), 'id', 'f_id');
    const OpenKeys = [];
    let openKeysSubName = '';
    let type = false;
    function key (menuTree){
        if(menuTree && menuTree.children){
            OpenKeys.push(menuTree.id);
            return key(menuTree.children[0]);
        }else{
            openKeysSubName = menuTree.s_name;
            type = menuTree.type == '3'?true:false;
            return menuTree.id;
        }
    }
    if(menuTree && menuTree.length > 0){
        return [key(menuTree[0]),OpenKeys,openKeysSubName,type];
    }else {
        return ['111111',OpenKeys,'',type];
    }
};

Pages.propTypes = {
    organ: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ organ, loading }) => ({ organ, loading }))(Pages);
